<template>
	<view class="all">
		<view class="top">
			<image src="https://s4.ax1x.com/2022/02/07/HMY8sJ.jpg" />
			<view class="top_1">
				<text>物流状态：<label style="color:#FFB300  ;">运输中</label></text>
				<text>快递方式：德邦快递 </text>
				<text>快递单号：21558668656565 <label style="color:#FE4E2C;margin-left: 10rpx;">复制</label> </text>
			</view>
		</view>
		<view class="jinage">
		</view>
		<view class="body">
			<text>物流信息</text>
			<block v-for="(item, index) in tracesData" :key="index">
				<tracknode :is-first="index===tracesData.length-1" :is-newest="index===0"
					:is-main-node="item.isMainNode" :node-data="item"></trackNode>
			</block>
		</view>
	</view>
</template>

<script>
	import tracknode from '../../../components/etherealwheat-track/trackNode.vue'
	export default {
		components: {
			tracknode
		},
		data() {
			return {
				tracesData: [{
						acceptStation: '包裹已被吴亦发同学签收', // 节点描述
						createTime: '2019-10-24 15: 27: 16',
						status: 'COMPLETE', // 节点状态
						phone: '16677778888', // 电话
						statusName: '已签收', // 节点标题
						isMainNode: false // 是否主节点，主节点前方展示icon
					},
					{
						acceptStation: '由派送员蔡小坤同志配送，电话：',
						createTime: '2019-10-24 15: 26: 41',
						status: 'DELIVERING',
						phone: '16677778888',
						statusName: '运输中',
						isMainNode: false
					},
					{
						acceptStation: '已到XXX小区快递点',
						createTime: '2019-10-24 15: 26: 41',
						status: 'DELIVERING',
						phone: '',
						statusName: '运输中',
						isMainNode: false
					},
					{
						acceptStation: '已到海宁集散中心',
						createTime: '2019-10-24 15: 26: 18',
						status: 'DELIVERING',
						phone: '',
						statusName: '运输中',
						isMainNode: false
					},
					{
						acceptStation: '已到杭州集散中心',
						createTime: '2019-10-24 15: 26: 07',
						status: 'DELIVERING',
						phone: '',
						statusName: '运输中',
						isMainNode: false
					},
					{
						acceptStation: '包裹已到达余杭区集散中心',
						createTime: '2019-10-24 15: 25: 54',
						status: 'DELIVERING',
						phone: '',
						statusName: '运输中',
						isMainNode: false
					},
					{
						acceptStation: '快递员已上门取件',
						createTime: '2019-10-24 15: 25: 17',
						status: 'DELIVERING',
						phone: '',
						statusName: '已揽收',
						isMainNode: false
					},
					{
						acceptStation: '等待快递员上门揽件',
						createTime: '2019-10-24 15: 25: 00',
						status: 'WATTING_DELIVER',
						phone: '',
						statusName: '已发货',
						isMainNode: false
					},
					{
						acceptStation: '您的包裹正在打包',
						createTime: '2019-10-24 15: 24: 00',
						status: 'WATTING_DELIVER',
						phone: '',
						statusName: '待发货',
						isMainNode: false
					},
					{
						acceptStation: '订单支付成功，等待商家发货',
						createTime: '2019-10-24 15: 22: 30',
						status: 'PAYED',
						statusName: '已支付',
						isMainNode: false
					},
					{
						acceptStation: '订单提交成功',
						createTime: '2019-10-24 15: 22: 00',
						status: 'WATTING_PAY',
						statusName: '已下单',
						isMainNode: false
					}
				]
			};
		}
	}
</script>

<style lang="scss">
	.all {
		.body {
			padding: 30rpx;

			text {
				display: inline-block;
				margin-bottom: 20rpx;
				font-size: 34rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #333333;
				opacity: 1;
			}
		}

		.jinage {
			height: 16rpx;
			background: #F5F5F5;
			opacity: 1;
			border-radius: 0px;
		}

		.top {
			.top_1 {
				margin-left: 30rpx;

				text:nth-of-type(1) {
					margin-top: 30rpx;
					font-size: 30rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #333333;
					opacity: 1;
				}

				text:nth-of-type(2) {
					margin-top: 20rpx;
					font-size: 23rpx;
					font-family: HarmonyOS Sans;
					font-weight: 400;
					color: #7B7B7B;
					opacity: 1;
				}

				text:nth-of-type(3) {
					font-size: 23rpx;
					font-family: HarmonyOS Sans;
					font-weight: 400;
					color: #7B7B7B;
					opacity: 1;
				}

				text {
					display: block;
				}
			}

			display: flex;
			padding: 30rpx;

			image {
				width: 180rpx;
				height: 180rpx;
				opacity: 1;
				border-radius: 8rpx;
			}
		}
	}
</style>
